<template>
  <div class="app-container" style="display: flex">
    <div style="width: 75%">
      <div class="filter-container">
        <el-form v-if="dhstatus == false" ref="dataForm" size="mini" :model="listQuery" label-position="right"
          label-width="auto" style="width: 100%">
          <div>
            <div style="    width: 100%;display: flex;justify-content: space-between;align-items: center;">
              <div>
                <div class="lineBox">
                  <el-form-item label="实体名称" prop="name">
                    <el-input v-model="listQuery.person" size="mini" placeholder="" style="width: 120px;" />
                  </el-form-item>
                </div>
                <div class="lineBox">
                  <el-button size="mini" type="primary" icon="el-icon-search" @click="handleFilter">
                    查询
                  </el-button>
                </div>
              </div>
              <div>
                <el-radio-group v-model="radio2" size="mini" @change="handleRadioChang2">
                  <el-radio-button size="mini" label="一度关系" />
                  <el-radio-button size="mini" label="二度关系" />
                </el-radio-group>
              </div>
            </div>
            <div style="font-size: 12px;">
              <div>
                <div class="lineBox">
                  <div class="el-form-item el-form-item--mini">
                    人物：<span style="color: rgb(144, 147, 153)">{{
                      name
                    }}</span>
                  </div>
                </div>
                <div class="lineBox">
                  <div class="el-form-item el-form-item--mini">
                    描述：<span style="color: rgb(144, 147, 153)">{{
                      desc
                    }}</span>
                  </div>
                </div>
                <div class="lineBox">
                  <div class="el-form-item el-form-item--mini">
                    类型：<span style="color: rgb(144, 147, 153)">{{
                      semanticType
                    }}</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="lineBox">
                  <div class="el-form-item el-form-item--mini">
                    相关人物：
                    <el-link v-for="(item, index) of organizationArr" :key="index" style="font-size:14px"
                      class="always-underlined" target="_blank" type="primary" @click="skipinstitution(item)">
                      {{ item }} {{
                        index < organizationArr.length - 1 ? "," : ";"
                      }}
                    </el-link>
                  </div>
                </div>
              </div>
              <div>
                <div class="lineBox">
                  <div class="el-form-item el-form-item--mini">
                    发布档案：<span style="color: rgb(144, 147, 153)">{{
                      daQuantity
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>

      <div class="myTable1">
        <div id="main" ref="chart" style="min-height: 650px; width: 100%" />
      </div>
    </div>
    <div style="
        width: 25%;
        margin-left: 10px;
        min-height: 650px;
        padding: 20px 5px 0px 5px;
      " class="myTable1">
      <div style="font-size: 14px; font-weight: bold">
        {{ nodeName }}
      </div>
      <div style="font-size: 12px; margin-top: 10px; display: flex">
        <el-tag v-if="type" type="success" size="mini">
          {{ type }}
        </el-tag>
      </div>
      <div class="bixi-group-container-title">
        <div class="bixi-group-container-blue-block" />
        <label class="groupcontainer-title-F4sp83QczG">知识溯源</label><span class="bixi-group-container-description" />
        <div style="
            margin-left: 8px;
            min-height: 150px;
            overflow-y: auto;
            max-height: 200px;
          ">
          <div v-if="dhtitleList.length > 0">
            <div v-for="(item, index) in dhtitleList" :key="index" class="dhtitle">
              {{ index + 1 }}.
              <el-link style="font-size: 12px" class="always-underlined" target="_blank" type="primary"
                @click="skip(item)">
                {{ item }}
              </el-link>
            </div>
          </div>
          <div v-else style="
              text-align: center;
              color: #909399;
              font-weight: normal !important;
              font-size: 12px;
              line-height: 60px;
            ">
            可点图谱中实体加载
          </div>
        </div>
      </div>
      <div class="bixi-group-container-title">
        <div class="bixi-group-container-blue-block" />
        <label class="groupcontainer-title-F4sp83QczG">事件</label><span class="bixi-group-container-description" />

        <div style="
            margin-left: 8px;
            min-height: 450px;
            overflow-y: auto;
            max-height: 200px;
          ">
          <div v-if="show == true" style="margin-left: -35px">
            <el-timeline :reverse="true">
              <el-timeline-item v-for="(item, index) in locationArr" :key="index" :timestamp="index + '年'"
                placement="top">
                <el-card>
                  <div v-for="(itemc, indexc) in locationArr[index]" :key="indexc" class="badge-container"
                    @click="node(itemc)">
                    <div class="badge-left">
                      {{ itemc[1] }}
                    </div>
                    <div class="badge-right">
                      {{ itemc[2] }}
                    </div>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
          <div v-else style="
              text-align: center;
              color: #909399;
              font-weight: normal !important;
              font-size: 12px;
              line-height: 60px;
            ">
            暂无足迹
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" :fullscreen="true">
      <div id="mainfull" ref="chartmainfull" class="full-screen-chart" />
    </el-dialog>
  </div>
</template>

<script>
import { personApi } from "@/api/person";
import { questionsanswersApi } from '@/api/questionsanswers'
// import { personAndOrganizationApi } from '@/api/person'
export default {
  data() {
    return {
      daQuantity: "",
      show: false,
      organizationArr: [],
      locationArr: [],
      desc: "",
      name: "",
      semanticType: "",
      dialogVisible: false,
      radio1: "一度关系",
      radio2: "一度关系",
      project_id: null,
      content: "",

      dhstatus: false,
      dh: "",
      nodeName: "",
      type: "",
      dhtitleList: [],
      tableData: [],
      selectedNode: null,
      listLoading: false,
      listQuery: { person: null },
      options: {
        title: {
          text: "",
          textStyle: {
            color: "white",
          },
          left: "0px",
          top: "0px",
        },
        tooltip: {
          show: true,
        },
        legend: {
          show: true,
          data: [],
          selectedMode: "multiple",
          left: "10px", // 放在左边
          bottom: "10px", // 放在底部
          icon: "circle", // 使用圆形图标
          orient: "vertical", // 竖着排列
          itemWidth: 16, // 图例项宽度（可选，根据需要调整）
          itemHeight: 16, // 图例项高度（可选，根据需要调整）
          itemGap: 10,
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              // 下载为图片
              name: "知识图谱",
              type: "png",
              backgroundColor: "#fff",
            },

            restore: {
              // 还原
              title: "刷新",
            },
            myTool: {
              // 自定义工具 - 店家
              show: true,
              title: "全屏",
              icon: "path://M641.750109 384.100028l205.227128-204.519-0.704035 115.89966c-0.282433 9.611915 7.489578 18.09103 17.101493 17.808598l12.297071 0c9.611915-0.283456 17.667382-5.936199 17.808598-15.689331l0.565888-172.57752c0-0.14224 0.282433-9.187243 0.282433-9.187243 0.14224-4.804423-0.99056-9.187243-4.100388-12.297071-3.109828-3.109828-7.347339-5.086855-12.297071-4.946662l-8.763594 0.14224c-0.141216 0-0.278339 0-0.420579 0.14224L697.581696 98.166787c-9.611915 0.283456-17.667382 8.200776-17.808598 17.950837l0 12.297071c1.416256 11.44875 10.458189 18.092054 20.070104 17.808598l112.789832 0.283456-204.66124 203.814965c-9.329483 9.329483-9.329483 24.449855 0 33.778314 9.329483 9.470699 24.452925 9.470699 33.782408 0L641.750109 384.100028zM383.095141 576.889893 177.726797 780.705881l0.707105-115.338888c0.283456-9.607822-7.492648-18.086937-17.104563-17.808598l-13.001105 0c-9.611915 0.283456-17.667382 5.937223-17.808598 15.690354l-0.565888 172.718737c0 0.14224-0.282433 9.187243-0.282433 9.187243-0.14224 4.808516 0.99056 9.187243 4.096295 12.297071 3.109828 3.109828 7.351432 5.086855 12.297071 4.946662l8.762571-0.14224c0.14224 0 0.283456 0 0.425695-0.14224l171.873486 0.708128c9.607822-0.283456 17.667382-8.196683 17.808598-17.950837L344.93503 832.575226c-1.415232-11.44875-10.461259-18.092054-20.074198-17.808598L212.069977 814.483172 416.59 610.671277c9.329483-9.329483 9.329483-24.453948 0-33.782408C407.40685 567.41817 392.424624 567.41817 383.095141 576.889893L383.095141 576.889893zM894.047276 835.967486l-0.424672-172.718737c-0.283456-9.612938-8.200776-15.406898-17.809621-15.690354l-12.296047 0c-9.612938-0.278339-17.243733 8.200776-17.105586 17.808598l0.708128 115.903753L641.750109 576.889893c-9.329483-9.329483-24.452925-9.329483-33.782408 0-9.325389 9.328459-9.325389 24.452925 0 33.782408L812.490795 814.483172l-112.789832 0.283456c-9.611915-0.283456-18.515702 6.502088-20.073174 17.808598l0 12.297071c0.282433 9.611915 8.200776 17.667382 17.808598 17.950837l171.166381-0.708128c0.141216 0 0.282433 0.14224 0.424672 0.14224l8.763594 0.14224c4.803399 0.141216 9.187243-1.694595 12.296047-4.946662 3.109828-3.109828 4.238534-7.488555 4.097318-12.297071 0 0-0.14224-9.046027-0.14224-9.187243L894.047276 835.968509zM212.216309 146.506748l112.789832-0.283456c9.607822 0.283456 18.512632-6.502088 20.070104-17.808598L345.076246 116.116601c-0.283456-9.611915-8.196683-17.667382-17.808598-17.950837l-172.011632 0.708128c-0.14224 0-0.283456-0.14224-0.425695-0.14224l-8.761548-0.14224c-4.808516-0.141216-9.187243 1.694595-12.297071 4.946662-3.109828 3.109828-4.242627 7.488555-4.096295 12.297071 0 0 0.282433 9.046027 0.282433 9.187243l0.420579 172.718737c0.14224 9.608845 8.200776 15.406898 17.808598 15.686261l13.005198 0c9.611915 0.282433 17.242709-8.196683 17.10047-17.808598l-0.564865-115.334795 205.231221 203.958228c9.324366 9.329483 24.448832 9.329483 33.777291 0 9.329483-9.329483 9.329483-24.452925 0-33.782408L212.216309 146.506748 212.216309 146.506748zM212.216309 146.506748", // 你可以替换为你想要的图标路径
              onclick: () => {
                this.clickFullScreen(); // 使用箭头函数保持正确的 this 上下文
              },
            },
          },
          right: "10px", // 放在右边
          bottom: "10px", // 放在底部
          orient: "vertical", // 竖着排列
          itemGap: 10, // 按钮之间的间距（可选，根据需要调整）
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          show: false,
        },
        grid: {
          top: "80px",
        },
        series: [
          {
            type: "graph",
            // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            roam: true,
            // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。[ default: false ]
            focusNodeAdjacency: true,
            // 力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。
            force: {
              // 力引导布局的结果有良好的对称性和局部聚合性，也比较美观。
              // [ default: 50 ]节点之间的斥力因子(关系对象之间的距离)。支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
              repulsion: 2000,
              // [ default: 30 ]边的两个节点之间的距离(关系对象连接线两端对象的距离,会根据关系对象值得大小来判断距离的大小)，
              edgeLength: [1000, 300],
              // 这个距离也会受 repulsion。支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例:
              // 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50      edgeLength: [10, 50]
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10], // 分别设置起点和终点符号的大小
            lineStyle: {
              color: "black", // 边的颜色
              width: 1,
              fontSize: 12,
              normal: {
                cursor: "default", // 点击边时鼠标样式为默认箭头
              },
            },
            // 图的布局。[ default: 'none' ]
            layout: "force",
            // 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
            // 'circular' 采用环形布局;'force' 采用力引导布局.
            // 标记的图形
            symbol: "circle",
            // 关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
            normal: {
              lineStyle: {
                // 线的颜色[ default: '#aaa' ]
                color: "black",
                // 线宽[ default: 1 ]
                width: 1,
                // 线的类型[ default: solid实线 ]   'dashed'虚线    'dotted'
                type: "solid",
                // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
                opacity: 1,
                // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
                curveness: 0.5,
              },
            },
            // 关系对象上的标签
            label: {
              normal: {
                // 是否显示标签
                show: true,
                // 标签位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
                position: "bottom",
                formatter: function (params) {
                  // 使用 rich text 来添加背景颜色
                  return "{bg|" + params.name + "}";
                },
                rich: {
                  bg: {
                    padding: [3, 5], // 调整内边距
                    borderRadius: 4, // 圆角
                    backgroundColor: "#52606d", // 背景颜色
                    borderColor: "#333", // 边框颜色
                    borderWidth: 1, // 边框宽度
                    color: "#fff", // 文字颜色
                  },
                },
                // 文本样式
                textStyle: {
                  fontSize: 10,
                  color: "black",
                },
              },
            },
            // 连接两个关系对象的线上的标签
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 10,
                  color: "black",
                },
                // 标签内容
                formatter: function (param) {
                  return param.data.category;
                },
              },
            },
            data: [
              {
                name: "总企业",
                draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
                symbolSize: [80, 80], // 关系图节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                itemStyle: {
                  color: "#000", // 关系图节点标记的颜色
                },
                category: "企业分析", // 数据项所在类目的 index。
              },
              {
                name: "企业1",
                draggable: true,
                symbolSize: [50, 50],
                itemStyle: {
                  color: "#0000ff",
                },
                category: "入驻",
              },
              {
                name: "企业2",
                draggable: true,
                symbolSize: [50, 50],
                itemStyle: {
                  color: "skyblue",
                },
                category: "培育",
              },
              {
                name: "企业3",
                draggable: true,
                symbolSize: [50, 50],
                itemStyle: {
                  color: "#ff0000",
                },
                category: "申报",
              },
              {
                name: "企业4",
                draggable: true,
                symbolSize: [50, 50],
                itemStyle: {
                  color: "#00ff00",
                },
                category: "产教融合",
              },
            ],
            // 节点分类的类目，可选。如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。
            categories: [
              {
                // 类目名称，用于和 legend 对应以及格式化 tooltip 的内容。
                name: "企业分析",
              },
              {
                name: "入驻",
              },
              {
                name: "培育",
              },
              {
                name: "申报",
              },
              {
                name: "产教融合",
              },
            ],
            // 节点间的关系数据
            links: [
              {
                target: "企业1",
                source: "总企业",
                // 关系对象连接线上的标签内容
                category: "入驻",
              },
              {
                target: "企业2",
                source: "总企业",
                category: "培育",
              },
              {
                target: "企业3",
                source: "总企业",
                category: "申报",
              },
              {
                target: "企业4",
                source: "总企业",
                category: "产教融合",
              },
            ],
          },
        ],
      },
    };
  },

  created() {
    this.title = this.$route.query.institution;


    if (this.title != undefined) {
      this.listQuery.person = this.title;
      this.handleFilter();
    }


  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },

    async skip(dh) {
      const response = await questionsanswersApi("getIdBydh", { dh: dh });
      if (response.code == 200) {
        let url = "/dashboard/docview?id=" + response.data;

        window.open(url, "_blank");
      } else {
        this.$notify({
          title: "失败",
          message: "溯源失败",
          type: "error",
          duration: 1500,
        });
      }
    },

    handleRadioChang2(value) {
      this.handleFilter(event);
    },

    // 绑定点击事件的方法
    bindClickEvent() {
      if (this.myChartzzt) {
        // 移除之前的点击事件监听器（如果有），避免重复绑定
        this.myChartzzt.off("click");

        // 监听 click 事件
        this.myChartzzt.on("click", (params) => {
          let node = params.data.nodeInfo;
          // 你可以根据需要处理其他节点的点击事件

          if (params.dataType === "node") {
            this.raceability(node);

            this.attributeInformation(node);
          }
        });
      }
    },

    skipinstitution(institution) {

      let project_id = this.$route.query.project_id;

      let url = "/modelsknowledge/persondetails?project_id=" + project_id + "&title=" + institution

      window.open(url, '_blank');
    },

    async suyuan(dh) {

      const response = await questionsanswersApi("getIdBydh", { "dh": dh })
      if (response.code == 200) {
        let url = "/dashboard/docview?id=" + response.data

        window.open(url, '_blank');
      } else {
        this.$notify({
          title: '失败',
          message: "溯源失败",
          type: 'error',
          duration: 1500
        })

      }


    },

    async raceability(node) {
      console.log(node);

      let params = node;
      let data = localStorage.getItem("data");
      let arr = JSON.parse(data);
      let paramsNew = {};
      paramsNew.project_id = this.project_id;
      paramsNew.id = params.id;
      paramsNew.name = params.name;
      paramsNew.type = params.type;
      const response = await artApi("raceability", paramsNew);

      if (response.code == 200) {
        this.dhtitleList = response.data;
        this.nodeName = node.name;
        this.type = node.type;
      }
    },

    async attributeInformation(node) {
      console.log(node);

      const params = node;

      let data = localStorage.getItem("data");
      let arr = JSON.parse(data);

      params.project_id = arr.id;

      let paramsNew = {};

      if (this.project_id == null) {
        paramsNew.project_id = arr.id;
      } else {
        paramsNew.project_id = this.project_id;
      }

      paramsNew.id = params.id;
      paramsNew.name = params.name;
      paramsNew.type = params.type;

      const response = await artApi("attributeInformation", paramsNew);

      if (response.code == 200) {
        this.tableData = response.data;
      }
    },

    // 数据列表
    async handleFilter() {
      let data = localStorage.getItem("data");
      let arr = JSON.parse(data);

      this.listQuery.project_id = arr.id;
      // alert( this.radio2)
      this.listQuery.radio2 = this.radio2;

      const response = await personApi("getInstitutionJson", this.listQuery);

      if (response.code == 200) {
        this.project_id = response.project_id;
        await this.$nextTick();
        this.myChartzzt = this.$echarts.init(document.getElementById("main"));

        if (response.data.length == 0) {
          this.myChartzzt.clear();
          this.myChartzzt.setOption(this.zwtp());

          return;
        }

        this.options.series[0].data = response.data.data;
        this.options.series[0].links = response.data.links;
        this.options.series[0].categories = response.data.category;

        this.options.legend.data = response.data.cate;

        // this.$nextTick(() => {

        this.myChartzzt.setOption(this.options);

        this.bindClickEvent();

        this.desc = response.person.desc;
        this.name = response.person.name;
        this.semanticType = response.person.semanticType;

        this.organizationArr = response.organizationArr;

        this.dhtitleList = response.chunkArr;
        this.daQuantity = response.daQuantity;

        if (response.locationArr == "") {
          this.show = false;
        } else {
          this.show = true;
        }

        this.locationArr = response.locationArr;

        // });
      } else {
        this.options.series[0].data = [];
        this.options.series[0].links = [];
        this.options.series[0].categories = [];
        this.options.legend.data = [];
        this.myChartzzt = this.$echarts.init(document.getElementById("main"));
        this.myChartzzt.setOption(this.options);

        this.nodeName = "";
        this.type = "";
        this.dhtitleList = [];
        this.tableData = [];
        this.desc = response.person.desc;
        this.name = response.person.name;
        this.semanticType = response.person.semanticType;
      }
    },

    clickFullScreen() {
      this.dialogVisible = true;

      this.$nextTick(() => {
        var myChartzzt = this.$echarts.init(
          document.getElementById("mainfull")
        );
        myChartzzt.setOption(this.options);
      });
    },

    zwtp() {
      var option = {
        title: {
          text: "暂无知识图谱",
          left: "center",
          top: "center",
          textStyle: {
            color: "#999",
            fontSize: 24,
          },
        },
        graphic: [
          {
            type: "image",
            z: 0,
            style: {
              image:
                "https://img.alicdn.com/tfs/TB1YRYwQpXXXXXdaXXXXXXXXXXX-300-300.png", // 示例图片，可以替换为其他图片地址
              width: 100,
              height: 100,
            },
            left: "center",
            top: "middle",
          },
        ],
        xAxis: {
          show: false,
        },
        yAxis: {
          show: false,
        },
        series: [],
      };
      return option;
    },

    // 恢复所有边的颜色
    resetEdgesColor() {
      this.options.series[0].edges.forEach((edge) => {
        edge.lineStyle.color = "#ccc";
      });
      this.myChartzzt.setOption(this.options);
    },

    // 高亮与指定节点相关的边
    highlightRelatedEdges(nodeName) {
      this.options.series[0].edges.forEach((edge) => {
        if (edge.source === nodeName || edge.target === nodeName) {
          edge.lineStyle.color = "#000"; // 或者其他你想要的颜色
        }
      });
      this.myChartzzt.setOption(this.options);
    },
    toggleFullScreen() {
      const elem = this.$refs.chart.$el;
      if (
        !document.fullscreenElement &&
        !document.mozFullScreenElement &&
        !document.webkitFullscreenElement &&
        !document.msFullscreenElement
      ) {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-font {
  color: rgba(0, 0, 0, 0.85);
  font-size: 12px;
  line-height: 1.5715;
  word-break: break-word;
  overflow-wrap: break-word;
  font-weight: normal !important;
}

.always-underlined {
  text-decoration: underline;
}

::v-deep .el-table__empty-text {
  font-weight: normal !important;
  font-size: 12px;
}

::v-deep .el-table__row {
  height: 30px; /* 设置你想要的行高 */

  td {
    padding: 5px 0;
  }
}

::v-deep .el-link--inner {
  font-size: 12px;
}

html,
body,
.app-container {
  height: 100%; /* 设置 html 和 body 以及 .app-container 的高度为 100% */
  margin: 0; /* 清除默认边距 */
}

.dhtitle {
  margin-top: 5px;
  color: #6ea3fd;
}

.myTable1 {
  background-color: #fff;
  // padding: 40px 20px 0px 20px;
}
.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}
.bixi-group-container-title {
  color: #363b45;
  font-size: 12px;
  font-weight: 550;
  margin: -4px 0;
  margin-top: 2px;
}
.bixi-group-container-blue-block {
  background: #4d67be;
  border-radius: 0 4px 4px 0;
  display: inline-block;
  height: 12px;
  margin-right: 4px;
  position: relative;
  top: 1px;
  width: 3px;
}

.groupcontainer-title-F4sp83QczG {
  font-size: 12px;
  font-weight: 600;
}

.bixi-group-container-description {
  color: #b9bbbe;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px;
  margin-left: 8px;
}

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 设置最大显示行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  // width: 200px;
  // border: 1px solid #ccc;
  // padding: 5px;
}
/* 确保图表容器占据整个对话框 */
.full-screen-chart {
  width: calc(100% - 40px); /* 减去边距 */
  height: calc(100% - 50px); /* 减去标题栏的高度 */
  display: flex;
  position: absolute; /* 使用绝对定位来确保覆盖整个父容器 */
  // margin-bottom: 1000px;
}
.badge-container {
  // cursor: pointer;
  margin-left: 10px;
  // margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  background-color: #e8f4ff;
  border-color: #d1e9ff;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #1890ff;
}
.badge-left {
  margin-right: 10px;
  color: #1890ff;
}

.badge-right {
  background-color: #2bd6d6;
  border-radius: 10px;
  padding: 0px 10px;
  color: #333;
  // box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15),
  //   /* 外部阴影 */ inset 0 -3px 5px rgba(255, 255, 255, 0.7);
  /* 内部上阴影 */

  /* 添加过渡效果 */
}
</style>
